<script setup>
import { UseSocketStore,UseUserStore } from '@/stores/index.js';

const peopleList = ref([]);
let socketStore = UseSocketStore();
let userStore = UseUserStore();
watchEffect(() => {
  if (socketStore) {
    socketStore.socket.on('roomInfo', (data) => {
      console.log('房间信息', JSON.parse(data));
      peopleList.value = JSON.parse(data).results;
      userStore.onlineUsers = JSON.parse(data).results;
      console.log(' peopleList.value', peopleList.value)
    });
  }
});
</script>

<template>

  <div class="h-2/6">
    <h2 class="font-medium text-xl mb-1">谈话(28)</h2>
    <div class="custom-scrollbar overflow-x-auto h-9/10">
      <div
          v-for="item in peopleList"
          class="w-12/13 pt-2 h-1/3 rounded-full m-1 hover:bg-chatList transition-all  ease-in-out delay-80  leading-1/3 box-border ">

        <div class="flex justify-between w-full h-full">
          <div class="flex">
            <div class="m-1">
              <a-avatar
                      class="w-14 h-14 "
                        :src="item.avator">
              </a-avatar>
            </div>
            <div class="leading-7 text-sm">
              <div :style="item.role === 'root' ? {color:'red'} : null">{{ item.userName }}</div>
              <div>203219348@qq.com</div>
            </div>
          </div>
          <div>
            <div
                class="mr-2 mt-1 w-12 h-12 pt-0.5  leading-12 rounded-full bg-gray-200 text-center hover:bg-blue-500 *:hover:text-white   transition-all  ease-in-out delay-80">
              <span class="icon-[ph--microphone-fill] textNoActiveStyle group-hover:text-white "></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<style scoped>
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>